<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>移动页面demo</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        a{
            text-decoration: none;
            color:inherit;
        }
        ul,ol{
            list-style: none;
        }
        button{
            position: absolute;
            right: 20px;
            top:26px;
        }
        .logo{
            width: 60px;
            height: 60px;
            background-color: grey;
            border-radius: 30px;
        }
        header{
            position: relative;
            padding: 10px;
        }

        .nav>li{
            float: left;
        }
        .nav{
            display: none;
            background-color: #ccc;
            margin-top: 20px;
        }
        .nav.active{
            display: flex;
            justify-content: space-around;
        }
        .nav2{
            display: none;
        }
        @media (min-width:450px ) {
            button{
                display: none;
            }
            .nav2{
                display: flex;
                align-items: center;
                margin: 0 10px;
            }
            .nav{
                /* 优先级  上面有.nav.active*/
                display: none !important;
            }
            header{
                display: flex;
            }

        }
    </style>
</head>
<body>
<header>
    <div class="logo"></div>
    <button id="xx">菜单</button>
    <ul class="nav" id="yy">
        <li>导航1</li>
        <li>导航2</li>
        <li>导航3</li>
        <li>导航4</li>
        <li>导航5</li>
    </ul>
    <ul class="nav2">
        <li>导航1</li>
        <li>导航2</li>
        <li>导航3</li>
        <li>导航4</li>
        <li>导航5</li>
    </ul>
</header>
<script>
    xx.onclick=function () {
        yy.classList.toggle('active');
    }
</script>
</body>
</html>